<template>
    <view class="l-rate l-class">
        <view class="l-rate-star" :data-index="index" mut-bind:tap="handleClick" v-for="(item, index) in count" :key="index">
            <view
                class="icon-checked"
                v-if="scoreClone > index"
                hover-class="none"
                :hover-stop-propagation="false"
                :data-rate="scoreClone - index"
                :style="'width:' + (scoreClone - index < 1 ? (scoreClone - index) * 100 : 100) + '%'"
            >
                <image
                    v-if="activeImage && inActiveImage"
                    class="image-item l-class-image l-image-class"
                    :src="activeImage"
                    mode="aspectFit|aspectFill|widthFix"
                    :lazy-load="false"
                ></image>
                <l-icon v-else :name="name" l-class="l-class-icon l-icon-class" :size="size" :color="activeColor" />
            </view>

            <image
                v-if="activeImage && inActiveImage"
                class="image-item l-class-image l-image-class"
                :src="inActiveImage"
                mode="aspectFit|aspectFill|widthFix"
                :lazy-load="false"
            ></image>

            <l-icon v-else :name="name" l-class="l-class-icon l-icon-class" :size="size" :color="inActiveColor"></l-icon>
        </view>
    </view>
</template>

<script>
import lIcon from '../icon/index';
import eventBus from '../core/utils/event-bus';
export default {
    data() {
        return {
            scoreClone: 0
        };
    },

    externalClasses: ['l-class', 'l-class-icon', 'l-class-image', 'l-icon-class', 'l-image-class'],

    options: {
        multipleSlots: true
    },

    props: {
        count: {
            type: Number,
            default: 5
        },
        score: {
            type: Number,
            default: 0
        },
        size: {
            type: String,
            default: '36'
        },
        disabled: Boolean,
        activeColor: {
            type: String,
            default: '#FF5252'
        },
        inActiveColor: {
            type: String,
            default: '#FFE5E5'
        },
        name: {
            type: String,
            default: 'favor-fill'
        },
        activeImage: String,
        inActiveImage: String
    },

    methods: {
        handleClick(e) {
            if (this.disabled) {
                return;
            }
            const { index: t } = e.currentTarget.dataset;
            this.setData({
                scoreClone: t + 1
            });
            this.$emit('linchange', {
                detail: {
                    score: t + 1
                }
            });
            eventBus.emit('lin-form-change-' + this.id, this.id);
        },
        getValues() {
            return this.scoreClone;
        },
        reset() {
            this.setData({
                scoreClone: 0
            });
        }
    },

    created: function () {}
};
</script>
<style>
.l-rate,
.l-rate-star {
    display: inline-flex;
}
.l-rate-star {
    position: relative;
}
.l-rate-star ~ .l-rate-star {
    margin-left: 10rpx;
}
.icon-checked {
    position: absolute;
    overflow: hidden;
}
.image-item {
    width: 80rpx;
    height: 80rpx;
}
</style>
